<?php
     /**
 * +----------------------------------------------------------------------
 * phpscript
 * +----------------------------------------------------------------------
 *                      .::::.
 *                    .::::::::.            | Author: Carll
 *                    :::::::::::           | Email:y7wanghui@gmail.com
 *                 ..:::::::::::'           | DATETIME: 27/7/2023
 *             '::::::::::::'
 *                .::::::::::
 *           '::::::::::::::..
 *                ..::::::::::::.
 *              ``::::::::::::::::
 *               ::::``:::::::::'        .:::.
 *              ::::'   ':::::'       .::::::::.
 *            .::::'      ::::     .:::::::'::::.
 *           .:::'       :::::  .:::::::::' ':::::.
 *          .::'        :::::.:::::::::'      ':::::.
 *         .::'         ::::::::::::::'         ``::::.
 *     ...:::           ::::::::::::'              ``::.
 *   ```` ':.          ':::::::::'                  ::::..
 *                      '.:::::'                    ':'````..
 * +----------------------------------------------------------------------
 */
$dir = './'; // 当前目录路径
// 获取目录下的所有文件和文件夹
$items = scandir($dir);
// 输出文件夹名称和图片文件
echo'<ul class="menu">';
    foreach ($items as $item) {
        // 排除当前目录和上级目录
        if ($item == '.' || $item == '..') {
            continue;
        }
        // 检查是否为文件夹
        if (is_dir($dir . $item)) {
            // 输出文件夹名称并创建链接
            echo ' <li><a href="?folder=' . $item . '">' . $item . '</a></li>';
        }
    }
echo '</ul>';
if (isset($_GET['folder'])) {
    $folder = $_GET['folder'];
    $files = glob($folder . '/*.{jpg,png,gif}', GLOB_BRACE);
    $page = isset($_GET['page']) ? $_GET['page'] : 1;
    $start = ($page - 1) * 15;
    $end = $start + 15;
    $filesToShow = array_slice($files, $start, $end);
    if (count($filesToShow) > 0){
        echo '<div class="container">';
        foreach ($filesToShow as $file) {
            echo '<div class="item">';
            echo '<img src="' . $file . '" alt="Image"><br>';
            echo '</div>';
        }
        echo '</div>';
        $nextPage = $page + 1;
        echo '<a class="next-page" href="?folder=' . $folder . '&page=' . $nextPage . '">下一页</a>';
    }

}
echo "<!DOCTYPE html>
<html>
<head>
    <title>照片墙</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #f5f5f5;
			font-family: Arial, sans-serif;
		}
		
        /* 设置菜单栏的样式 */
        .menu {
          list-style-type: none;
          margin: 0;
          padding: 0;
          overflow: hidden;
          background-color: green;
          display: flex; /* 添加此行以使菜单项在一行中显示 */
          justify-content: left; 

        }
        /* 设置菜单项的样式 */
        .menu li {
          float: left;
          width: 20%; /* 设置每个菜单项的宽度为20% */
          box-sizing: border-box; /* 盒模型设置为border-box，确保宽度包括边框和内边距 */
        }
        .menu li:first-child { 
         margin-left: 10%; /* 只有第一个li距离左边10% */ 
        }
        /* 设置链接的样式 */
        .menu li a {
          display: block;
          color: white;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
          
        }
        /* 设置链接的鼠标悬停样式 */
        .menu li a:hover {
          background-color: #172030;
          
        }
        /* 设置下一页链接的样式 */
        .next-page {
            display: block; 
            width: 100px; 
            margin: 20px 0 0 10%; 
        }
		.container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			padding: 20px;
		}
		.item {
			width: 300px;
			height: 300px;
			margin: 10px;
			overflow: hidden;
			border-radius: 5px;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
			cursor: pointer;
			transition: transform 0.3s ease-in-out;
		}
		.item:hover {
			transform: scale(1.05);
		}
		.item img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.3s ease-in-out;
		}
		.item:hover img {
			transform: scale(1.2);
		}
	</style>
</head>
<body>
</html>";
